<template>
  <div class="house_page">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.go(-1)" />
    <!-- 表单内容 -->
    <div class="house">
      <h3 class="house_title">房源信息</h3>

      <van-cell
        title="小区名称"
        :value="$route.query.communityName || '请输入小区名'"
        is-link
        to="/houseSearch"
      >
      </van-cell>
      <!-- 租金 -->
      <van-field v-model="homeRelease.price" placeholder="请输入租金/月">
        <template #label
          >租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</template
        >
        <template #extra> ￥/月 </template>
      </van-field>
      <!-- 建筑面积 -->
      <van-field v-model="homeRelease.size" placeholder="请输入建筑面积">
        <template #label>建筑面积</template>
        <template #extra>㎡</template>
      </van-field>

      <!-- 户型 -->
      <roomType
        :releaseHomeData="releaseHomeData"
        @homeType="homeType"
      ></roomType>

      <!-- 所在楼层 -->
      <!-- releaseHomeData.floor有值才去渲染，没值不渲染 -->
      <floor
        :releaseHomeData="releaseHomeData"
        @floorType="floorType"
        v-if="releaseHomeData.floor"
      ></floor>
      <!-- 朝向 -->
      <Oriented
        :releaseHomeData="releaseHomeData"
        v-if="releaseHomeData.oriented"
        @orientedType="orientedType"
      >
      </Oriented>
      <!-- 房屋标题 -->
      <van-cell title="房屋标题" />
      <van-field
        v-model="homeRelease.title"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
      />
      <!-- 房屋图像 -->
      <van-cell title="房屋图像" />
      <van-uploader :after-read="afterRead" v-model="fileList" />
      <!-- 房屋配置 -->
      <van-cell title="房屋配置" />
      <van-grid column-num="5">
        <van-grid-item
          icon="photo-o"
          :text="item.name"
          v-for="(item, index) in homeConfigInfo"
          :key="index"
          :class="{ active: item.isDone }"
          @click="choiceIcon(item)"
        />
      </van-grid>
    </div>
    <!-- 房屋描述 -->
    <div class="house_desc">
      <van-cell title="房屋描述" />
      <van-field
        v-model="homeRelease.description"
        type="textarea"
        placeholder="请输入房屋描述信息"
      />
    </div>

    <div class="btn">
      <van-button type="default" class="cancle">取消</van-button>
      <van-button type="primary" class="submin" @click="submitHouse"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import roomType from "./components/roomType";
import floor from "./components/Floor";
import Oriented from "./components/Oriented";
import { housesParamsTwoAPI, houseIamgeAPI, rendUserHouseAPI } from "@/api";
import {} from "@/api";
export default {
  name: "rend",
  data() {
    let community = this.$route.query.community;
    console.log(666, community);
    return {
      homeRelease: {
        price: "",
        size: "",
        roomType: "",
        floor: "",
        oriented: "",
        title: "",
        houseImg: "",
        supporting: "",
        description: "",
        community: community || "",
      },
      releaseHomeData: {}, //发布房屋所需的条件
      fileList: [], //图像上传列表
      homeConfigInfo: [
        { name: "衣柜", icon: "YG", isDone: false },
        { name: "洗衣机", icon: "XYJ", isDone: false },
        { name: "空调", icon: "KT", isDone: false },
        { name: "天然气", icon: "TRQ", isDone: false },
        { name: "冰箱", icon: "BX", isDone: false },
        { name: "暖气", icon: "NQ", isDone: false },
        { name: "电视机", icon: "DSJ", isDone: false },
        { name: "热水器", icon: "RSQ", isDone: false },
        { name: "宽带", icon: "KD", isDone: false },
        { name: "沙发", icon: "SF", isDone: false },
      ],
    };
  },
  components: { roomType, floor, Oriented },
  created() {
    this.getHouseItem();
  },
  methods: {
    async getHouseItem() {
      const { data } = await housesParamsTwoAPI();
      this.releaseHomeData = data.body;
      console.log(this.releaseHomeData);
    },
    homeType(roomType) {
      this.homeRelease.roomType = roomType[0].value;
    },
    floorType(floorType) {
      this.homeRelease.floor = floorType[0].value;
    },
    orientedType(orientedType) {
      this.homeRelease.oriented = orientedType[0].value;
    },
    //图片上传
    afterRead() {},
    async getImg() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      //图片上传
      const arr = [];
      for (const x of this.fileList) {
        console.log(1111, x);
        const res = await houseIamgeAPI(x);
        arr.push(res.data.body[0]);
      }
      const re = arr.join("|");
      this.homeRelease.houseImg = re;
      this.submintHouse();
    },
    //提交代码
    async submintHouse() {
      console.log(this.homeRelease);
      const res = await rendUserHouseAPI(this.homeRelease);
      this.$toast.success("加载成功");
      console.log(res);
      this.$dialog
        .confirm({
          title: "提示",
          message: "房源发布成功",
          confirmButtonText: "继续发布",
          cancelButtonText: "去查看",
        })
        .then(() => {
          // on confirm
          location.reload();
        })
        .catch(() => {
          // on cancel
          this.$router.push({ path: "/layout/house" });
        });
    },
    choiceIcon(item) {
      item.isDone = !item.isDone;
      let newArr = [];
      this.homeConfigInfo.forEach((item) => {
        if (item.isDone) {
          newArr.push(item.name);
        }
      });
      const res = newArr.join("|");
      this.homeRelease.supporting = res;
    },
    submitHouse() {
      this.getImg();
    },
  },
};
</script>

<style lang="less" scoped>
.house_page {
  margin-bottom: 90px;
  :deep(.van-nav-bar) {
    background-color: #21b97a;
    .van-icon {
      color: #fff;
    }
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .house {
    background-color: #fff;
    .house_title {
      padding: 15px 15px 9px;
      color: #21b97a;
      font-size: 15px;
      margin: 0;
    }
    .van-cell {
      border-bottom: 1px solid #eee;
      :deep(.van-cell__title) {
        color: #666;
        font-size: 16px;
        width: 100px;
      }
    }
    .van-uploader {
      padding: 15px 15px 9px;
    }
    .van-grid-item {
      &.active {
        color: #21b97a;
        :deep(.van-grid-item__text) {
          color: #21b97a;
        }
      }
    }
  }
  .house_desc {
    margin-top: 20px;
  }
  .btn {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    .cancle {
      width: 50%;
    }
    .submin {
      width: 50%;
    }
  }
}
</style>
